<template>
  <titleCompt title="分税目情况">
    <div class="xzctspmbox">
      <dv-scroll-board :config="tableConfig" class="xzctspmbox-table" />
    </div>
  </titleCompt>
</template>

<script>
import titleCompt from "./titleCompt";
export default {
  components: {
    titleCompt,
  },
  data() {
    return {
      tableData_fsm: [
        {
          SZMC: "增值税",
          GM: 48074,
          TBZF: (Math.random() * 100).toFixed(1),
        },
        {
          SZMC: "烟草制品业",
          GM: 11566,
          TBZF: (Math.random() * 100).toFixed(1),
        },
        {
          SZMC: "卷烟",
          GM: 35621,
          TBZF: (Math.random() * 100).toFixed(1),
        },
        {
          SZMC: "雪茄烟",
          GM: 9678,
          TBZF: (Math.random() * 100).toFixed(1),
        },
        {
          SZMC: "烟丝",
          GM: 1459,
          TBZF: (Math.random() * 100).toFixed(1),
        },
        {
          SZMC: "烟叶",
          GM: 3856,
          TBZF: (Math.random() * 100).toFixed(1),
        },
        {
          SZMC: "其他烟草加工业",
          GM: 2791,
          TBZF: (Math.random() * 100).toFixed(1),
        },
        {
          SZMC: "酒、饮料和精制茶制造业",
          GM: 2272,
          TBZF: (Math.random() * 100).toFixed(1),
        },
        {
          SZMC: "白酒",
          GM: 781,
          TBZF: (Math.random() * 100).toFixed(1),
        },
        {
          SZMC: "黄酒",
          GM: 1020,
          TBZF: (Math.random() * 100).toFixed(1),
        },
        {
          SZMC: "啤酒",
          GM: 202,
          TBZF: (Math.random() * 100).toFixed(1),
        },
      ],
    };
  },
  computed: {
    // 表格配置
    tableConfig() {
      let configData = [];
      let header = [];
      header = ["税目", "规模", "同比增幅"];
      this.tableData_fsm.forEach((item) => {
        configData.push([
          `<span data-hydm="${item.HY_DM}"  class="hoverFont">${item.SZMC}</span>`,
          `<span >${this.digtalFormatUnit(item.GM)}</span>`,
          `<span >${this.digtalFormatUnit(item.TBZF)}%</span>`,
        ]);
      });

      return {
        align: ["center", "left", "center", "center", "center"],
        indexHeader: "",
        headerBGC: "#3877b988",
        oddRowBGC: "#3877b966",
        evenRowBGC: "#3877b947",
        index: true,
        header: header,
        columnWidth: [100, 700, 200, 200],
        rowNum: 5,
        waitTime: 5000,
        data: configData,
      };
    },
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {},
    renderData(data) {
      let charts = {
        xData: [],
        yData: [],
        unit: "%",
      };

      data.forEach((row) => {
        charts.xData.push(row.NAME);
        charts.yData.push(row.VALUE * 100);
      });
      return charts;
    },
  },
};
</script>

<style lang="scss" scoped>
.xzctspmbox {
  width: 100%;
  height: 100%;
  &-table {
    width: 98%;
  }
}
.chart {
  width: 100%;
  height: 100%;
}
</style>
